<template>

	<view class="article-item-outer">
		<div class="article-title">
			<span>{{data.name}}</span>
			<button type="primary" plain="true" @click="editArticle">Edit this article</button>
		</div>
		<!-- <div style="position: relative"> -->
		<div ref="desc" :class="{'article-description': true, 'article-description-shrinked':  !expanded}">
			{{data.description}}
		</div>

		<div style="width: 100%; display: flex; align-items: center;">
			<div style="flex-grow: 1;"></div>
			<span type="default" @click="expanded = !expanded" class="details-switch">
				{{ expanded? "Hide Description Details △":"Show Description Details ▽"}}</span>
		</div>

		<!-- </div> -->
		<div class="article-bottom-bar">
			<uni-tag class="article-tag" :text="tag.abbr" type="primary" v-for="tag in data.tags" :key="tag.id"
				@click="onTagClick(tag)" />
			<div class="article-bottom-spacer"></div>
			<div class="article-meta">
				<uni-rate v-model="data.rate" :readonly="true" @change="onChange" />
				<span>{{data.rate!=null?data.rate.toFixed(2): "Unknown"}}</span>
			</div>
		</div>
	</view>

</template>

<script lang="ts">
	import {
		ArticleMeta
	} from "@/models/article"
	import {
		PropType,
		defineComponent
	} from "vue"

	export default {
		props: {
			data: {
				type: Object as PropType < ArticleMeta > ,
				required: true
			}

		},
		data() {
			return {
				mark: 4,
				expanded: false,
				needsExpansion: false
			}
		},
		mounted() {
			this.needsExpansion = this.$refs.desc.clientHeight < this.$refs.desc.scrollHeight
		},
		methods: {
			onSubmit(e) {
				console.log(e)
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			},
			onTagClick(tag: string) {
				console.log('clicked tag', tag)
				uni.navigateTo({
					url: `/pages/tabbar/tabbar-1/tags/tag?tag=${tag}`
				});
			},
			editArticle() {
				uni.navigateTo({

					url: `/pages/tabbar/tabbar-1/article-editor?data=${ encodeURIComponent(JSON.stringify(this.data))}`,
				});
			}
		}
	};
</script>

<style scoped>
	.details-switch {
		color: #2979ff;
		font-size: 0.8em;
	}

	.details-switch:hover {
		color: #94bcff;
	}

	.article-item-outer {
		display: flex;
		flex-direction: column;
		width: 100%;
		/* background-color: red; */
		border: 1px #bbbbbb solid;
		align-items: flex-start;
		padding: 12px;
		box-sizing: border-box;
	}

	.article-tag {
		margin-left: 12px;
	}

	.article-bottom-bar :first-child {
		margin-left: 0px;
	}

	.article-meta {
		display: flex;
		align-items: center;
	}

	.article-meta span {
		font-size: 2em;
		margin-left: 10px;
		color: #ffca3e;
	}

	.article-bottom-bar {
		display: flex;
		width: 100%;
		align-items: center;
	}

	.article-bottom-spacer {
		flex-grow: 1;
	}

	.article-description {
		text-align: left;
		user-select: text;
		position: relative;
	}

	.article-description-shrinked {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.article-title {
		display: flex;
		flex-direction: row;
		user-select: text;
		font-size: 1.5em;

	}

	.uni-input {
		height: 28px;
		line-height: 28px;
		font-size: 15px;
		padding: 0px;
		flex: 1;
		background-color: #FFFFFF;
	}
</style>
